<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学习报告</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->
    <style>
        *{
            margin: 0px;
            padding:0px;
            box-sizing: border-box;
        }
        #app{width: 96%;margin-left: 2%;border:1px solid;height: 100px}

        .header{width: 100%;margin-left:0%;margin-top:0px;margin-bottom: 15px }
        .header img{width:100%}
     //   #myChart{background: #4b5563}
        .title{width: 30%;margin-left:35%;margin-top:15px;margin-bottom: 15px }
        .title img{width:100%}
        .container {
            display: flex;
            padding: 0 2% 0;
            margin-top: 30px;
            margin-bottom: 43px;
        }
        #user{ margin-top: -220px;margin-left: 41%;width:18%}
        #user img{width:100%}
        .a1 {
            display: flex;
            padding: 0 2% 0;
            margin-top: 15px;
        }
        .a2{width:5px;margin-top: 1px;}
        .a2 img{width: 100%}
        .a3{margin-left: 4px;font-weight: bold;font-size: 14px}
        .a4{margin-left: 18px;font-size: 14px;color:#787878}
        .box {
            height: 80px;
            width: 30%;
            color: #FFFFFF;
            border-radius: 15px;
           // border: 1px solid red;
        }
        .box1{}
        .box2{margin-left: 5%;}
        .box3{margin-left: 5%;}
        .num{margin-top: 3px;text-align: center;font-size: 20px;}
        .total{margin-top: 13px;text-align: center;font-size: 14px;}

        .c3{width:15px;margin-top:2px;position: relative;}
        .c3 img{width: 100%;}
        .line3{width: 100%;/* background-color: #eee; */border-radius: 10px;margin-top: 7px;padding-top: 10px;position: relative;}
        .c4{width:37%;margin-left: 5%;}
        .c4 img{width: 100%;}
        .c5{position: absolute;top:11%;left: 44%;width:56%;/* border: 1px solid ; */}
        .c6{font-size: 15px;font-weight: bold;}
        .c61{font-size: 14px;}
        .c7{font-size: 14px; margin-top: 2px;}
        .c8{position: absolute;top:-3%;left: 148%;width:100px;/* border: 1px solid red; */font-size: 14px;}

        .line4{background: #EFF8FF;padding: 8px 8px 25px 8px;margin-left: 2%;width: 96%;border-radius: 10px}
    </style>
</head>
<body>
<!--<div id="app"></div>-->

<div class="header"><img  alt="" src="../gd/背景.png"></div>
<div id="user"><img src="../gd/头像.png" alt="" /></div>
<div class="container">
    <div class="box box1">
        <div class="total">累计学习课程</div>
        <div class="num">16<span style="font-size: 12px">&nbsp;节</span></div>
    </div>
    <div class="box box2">
        <div class="total">累计学习练习</div>
        <div class="num">10<span style="font-size: 12px">&nbsp;次</span></div>
    </div>
    <div class="box box3">
        <div class="total">累计学习时间</div>
        <div class="num">203<span style="font-size: 12px">&nbsp;分钟</span></div>
    </div>
</div>
<canvas id="myChart" width="400" height="300" style="margin-left: -3%"></canvas>
<!--<div class="title"><img  alt="" src="../gd/标题-学习记录.png"></div>-->
<div class="title"><img  alt="" src="../gd/标题-观看记录.png"></div>
<div class="line3">
<div class="c4"><img src="../gd/最美中国字一年级上-课文.png" alt=""></div>
<div class="c5">
    <div class="c6">部编辑一年级上-课文</div>
    <div class="c7">第一集 人</div>
    <div class="c3"><img src="../gd/手机.png" alt="">
        <div class="c8">4月27&nbsp;17:12</div>
    </div>
</div>
</div>
<div class="line3">
    <div class="c4"><img src="../gd/最美中国字一年级上-语文天地.png" alt=""></div>
    <div class="c5">
        <div class="c6">部编辑一年级上-语文天地</div>
        <div class="c7">第一集 厂</div>
        <div class="c3"><img src="../gd/手机.png" alt="">
            <div class="c8">4月27&nbsp;17:12</div>
        </div>
    </div>
</div>
<!--<div class="title"><img  alt="" src="../gd/标题-学习点评.png"></div>
<div class="line4">
    <div class="a1">
        <div class="a2"><img src="../gd/学习点评的符合.png" alt=""></div>
        <div class="a3">优点</div>
    </div>
    <div class="a4">基本笔画如横、竖、撇、捺，可写有了一定的规范，线条较为平稳</div>
    <div class="a1">
        <div class="a2"><img src="../gd/学习点评的符合.png" alt=""></div>
        <div class="a3">优点</div>
    </div>
    <div class="a4">基本笔画如横、竖、撇、捺，可写有了一定的规范，线条较为平稳</div>
    <div class="a1">
        <div class="a2"><img src="../gd/学习点评的符合.png" alt=""></div>
        <div class="a3">优点</div>
    </div>
    <div class="a4">基本笔画如横、竖、撇、捺，可写有了一定的规范，线条较为平稳</div>
</div>-->
<script>
    const ctx = document.getElementById('myChart');
    const labels = ['第一周', '第二周', '第三周','第四周'];  // 设置 X 轴上对应的标签
    const data = {
        labels: labels,
        datasets: [{
            label: '学习次数',
            data: [10, 11, 12, 14, 7, 1],
            backgroundColor: [
                'rgba(54, 162, 235, 0.2)'
            ],
            borderColor: [
                'rgba(54, 162, 235, 1)'
            ],
            borderWidth: 1,
        },/*{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            type:'bar',
            backgroundColor:'rgba(0, 0, 0, 0.1)',
            borderColor:'rgba(255, 99, 132, 1)',
        },*/{
            label: '练习次数',
            data: [65, 59, 80, 40],
            backgroundColor: [
                'rgba(255, 205, 86, 0.2)'
            ],
            borderColor: [     //设置每个柱形图边框线条颜色
                'rgb(255, 205, 86)'
            ],
            borderWidth: 1     // 设置线条宽度
        }]
    };
    const config = {
        type: 'bar', // 设置图表类型
        data: data,  // 设置数据集
       /* plugins: {
            legend: {
                labels: {
                    font: {
                        size: 24 // 设置图例的字体大小
                    }
                }
            },
            title: {
                font: {
                    size: 26 // 设置标题的字体大小
                }
            }
        },*/

        options: {
            plugins: {

                title: {
                    display: false, // 显示标题
                    text: 'Chart.js Bar Chart1', // 设置标题文本
                    color: 'red',
                    padding: { // 设置标题周围的填充空间
                        top: 10, // 上方填充空间
                        bottom: 10 // 下方填充空间
                    },
                    font: {
                        size: 14 ,// 设置标题的字体大小
                    }
                },
                legend: {
                    labels: {
                        font: {
                            size: 14 // 设置图例的字体大小
                        }
                    }
                },
            },
            scales: {
                /*y: {
                    beginAtZero: true // 设置 y 轴从 0 开始
                }*/
                x: {
                    display: true,
                    ticks: {
                        font: {
                            size: 14  // 设置X轴标签的字体大小
                        }
                    },
                    title: {
                        display: true,
                        /*text: 'X轴'*/
                    }
                },
                y: {
                    display: true,
                    ticks: {
                        font: {
                            size: 14  // 设置X轴标签的字体大小
                        }
                    },
                    title: {
                        display: true,
                        /*text: 'Y轴'*/
                    }
                }
            }
        },
    };
    const myChart = new Chart(ctx, config);
</script>

</body>
</html>